<template>
  <div class="select-group">
    <el-select class="range_group" v-model="range_group_type" size="small" @change="changeRangeGroup" style="width: 110px" :clearable="false">
      <el-option v-for='item in range_group' :label='item.label' :value='item.key'></el-option>
    </el-select>

    <el-cascader placeholder="所有" :options="list_range" :props="{ multiple: true, value:'id', label:'name'}"
                 :show-all-levels="false" filterable clearable collapse-tags
                 @change="changeCascader"></el-cascader>
  </div>
</template>

<script>
export default {
  name: "SelectGroup",
  props:{
    value:[Array,null], // 绑定key
    list:Array // 传入选项
  },
  data(){
    return{
      range_group_type: '',
      range_group: [],
      list_range: [], // 原始列表数据
    }
  },

  mounted(){
    this.range_group_type = 'flow_type'
    this.range_group = [
      {key:"flow_type", label:"流量类型"},
      // {key:"cycle_mode", label:"周期类型"}
    ]
    this.changeRangeGroup(this.range_group_type)
  },

  methods:{
    groupKeyList(key){
      switch (key){
        case 'flow_type':
          return [
            {id: this.Enum.FlowTypeNormal, name:'常规', children: []},
            {id: this.Enum.FlowTypePool, name:'流量池', children: []}
          ]
        default:
          return [
            {id: 0, name:'所有', children: []}
          ]
      }
    },
    changeRangeGroup(e){
      if (!this.list.length){
        return this.list_range = []
      }
      let list_range_map = {}
      this.list.forEach(function (item){
        let k = item.extend[e]
        if (!list_range_map[k]){
          list_range_map[k] = []
        }
        list_range_map[k].push(item)
      })
      this.list_range = this.groupKeyList(e).map((item)=>{
        if (item.id == 0){
          item.children = this.list
        }else {
          item.children = list_range_map[item.id]
        }
        return item
      })
    },
    // 选中变化事件
    changeCascader(e){
      let ids = []
      e.forEach(function (item){
        ids.push(item[1])
      })
      this.$emit('input', ids); // 双向绑定，对应 props.value
    },
  }
}
</script>

<style scoped>
.select-group{
  display: flex !important;
  align-items: flex-start;
  line-height: initial;
}
.select-group .range_group input{
  padding: 0 18px 0 5px;
}
.select-group .range_group span.el-input__suffix{
  width: 17px;
}
</style>